<template>
    <div class="to_top"  @click="toTopSmooth">
        <svg t="1576722847211"  class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="1117" width="24" height="24">
            <path d="M887.068839 777.273712 509.02883 386.389164 126.100488 782.384104l0-0.021489c-13.001105 12.935614-30.621415 20.914332-50.078559 20.914332-39.857776 0-72.13797-33.401738-72.13797-74.603115 0-20.106943 7.710612-38.35454 20.219507-51.783387l0 0 432.872848-447.622784 0 0c13.136182-14.055111 31.517831-22.820752 51.918463-22.820752 0.044002 0 0.089028 0 0.134053 0 0.089028 0 0.134053 0 0.179079 0 20.400632 0 38.82526 8.765641 51.91744 22.820752l0.045025 0 432.828846 447.622784-0.180102 0.179079c12.463869 13.405311 20.084431 31.56388 20.084431 51.604308 0 41.202401-32.280194 74.603115-72.136947 74.603115C919.887292 803.276946 900.295072 793.189194 887.068839 777.273712z"
                  p-id="1118" fill="#ffffff"></path>
        </svg>
    </div>
</template>
<script>
    export default {

        mounted() {
            window.addEventListener('scroll', this.Scroll, true)
        },
        methods: {
            toTop() {
                window.scrollTo(0, 0);
            },
            toTopSmooth() {
                $('html,body').animate({scrollTop: '0'}, 800);
            },

            Scroll() {
                this.scroll = document.documentElement.scrollTop || document.body.scrollTop
                if (this.scroll > 300) {
                    $('.to_top').fadeIn();
                } else {
                    $('.to_top').fadeOut();
                }
            },
        },
        destroyed() {
            // 离开该页面需要移除这个监听的事件，不然会报错  必须带第三个参数true，否则销毁不成功
            window.removeEventListener('scroll', this.Scroll, true);
        },
    }
</script>
<style>
    .to_top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #2b2d33;
        opacity: 0.6;
        width: 45px;
        height: 45px;
        text-align: center;
        cursor: pointer;
    }
    .icon{
        margin-top: 12px;
    }

    .to_top {
        display: none;
        z-index: 999;

    }
</style>
